<template>
<view class="">
	<page-head :title="title"></page-head>
	<view class="wrap">
		<view class="form">
			<form>
				<view class="title">
					基本信息
				</view>
				<view class="uni-form-item uni-column submitBox">
					<view class="preName">姓名</view>
					<input ref="name" @input="inputName" :value="name" class="uni-input int" name="input" placeholder="请输入联系人姓名(必填)" />
				</view>
				<view class="uni-form-item uni-column submitBox">
					<view class="preName">性别</view>
					<picker ref="sex" class="int pick" mode="selector" :range="sexRang" @change="selectSex">
						<view>{{sexRang[curSex]}}</view>
					</picker>
					<image src="../../static/icon/arrow.png" class="rightArrow" mode=""></image>
					<!-- <input class="uni-input int" name="input" placeholder="选填" /> -->
				</view>
				<view class="uni-form-item uni-column submitBox">
					<view class="preName">身份证号</view>
					<input ref="idcard" @input="inputIdcard" :value="idcard" class="uni-input int" name="input" placeholder="请输入房东身份证号" />
				</view>
				<view class="title">
					联系方式
				</view>
				<view class="uni-form-item uni-column submitBox">
					<view class="preName">电话</view>
					<input ref="phone" @input="inputPhone" :value="phone" class="uni-input int" name="input" placeholder="请输入手机号或者固话(必填)" />
				</view>
				<view class="uni-form-item uni-column submitBox">
					<view class="preName">微信号</view>
					<input ref="wx" @input="inputWx" :value="wx" class="uni-input int" name="input" placeholder="选填" />
				</view>
				<view class="uni-form-item uni-column submitBox">
					<view class="preName">QQ</view>
					<input ref="qq" @input="inputQq" :value="qq" class="uni-input int" name="input" placeholder="选填" />
				</view>
				<view class="buttonSync">
					<view class="text">
						同步保存到手机通讯录
					</view>
					<switch ref="issync" color="#FF984C" @change="switchChange" class="switch" />
				</view>
				<view class="uni-form-item uni-column submitBox">
					<view class="preName">备注</view>
					<input  ref="note" @input="inputNote" :value="note"  class="uni-input int" name="input" placeholder="选填" />
				</view>
			</form>
		</view>
	</view>
	<mpopup  ref="mpopup" :isdistance="true"></mpopup> 
</view>
</template>

<script>
	var _self;
	import mpopup from '@/components/xuan-popup/xuan-popup.vue';
	export default{
		components:{
			mpopup
		},
		data(){
			return {
				sexRang:['选填','男','女'],
				curSex: 0,
				is_sync:false,
				name:'',
				idcard:'',
				phone:'',
				wx:'',
				qq:'',
				note:''
			}
		},
		methods:{
			selectSex(e){		
				this.curSex =e.detail.value
				//console.log(e)
			},
			switchChange(e){
				this.is_sync = e.detail.value
				console.log(this.is_sync)
			},
			inputName(e){
				this.name = e.detail.value
			},
			inputIdcard(e){
				this.idcard = e.detail.value
			},
			inputPhone(e){
				this.phone = e.detail.value
			},
			inputWx(e){
				this.wx = e.detail.value
			},
			inputQq(e){
				this.qq = e.detail.value
			},
			inputNote(e){
				this.note = e.detail.value
			},
			getsubmit(){
				_self = this
				let name = this.name				
				let idcard = this.idcard
				let phone = this.phone
				let wx = this.wx
				let qq = this.qq
				let note = this.note
				if(!name){
					_self.$refs.mpopup.open({
						type:'info',
						content:'请输入姓名',
						timeout:2000,
					});
					return false;
				}	
				if(!phone){
					_self.$refs.mpopup.open({
						type:'info',
						content:'请输入手机号',
						timeout:2000,
					});
					return false
				}								
															
				uni.request({
					url: this.websiteUrl+'/api.php/house/landlordAdd',
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded'
						
					},
					data: {
						token:uni.getStorageSync('token'),
						name:name,
						mobile:phone,
						sex:_self.curSex,
						idcard:idcard,
						wx:wx,
						qq:qq,
						remark:note,
						is_sync:_self.is_sync
					},
					success: function(res){
						if(res.data.code == 1){
							_self.$refs.mpopup.open({
								type:'success',
								content:res.data.msg,
								timeout:2000,
							});
							
							uni.redirectTo({
								
						
							    url:"/pages/me/content/connection?action=publish"
							});
					
						}else{
							_self.$refs.mpopup.open({
								type:'info',
								content:res.data.msg,
								timeout:2000,
							});
						}
						
					},
					
				});
			}
		},
		onNavigationBarButtonTap(e) {
			console.log(e.index)
			if(e.index == 0){
				this.getsubmit()
			}
		}
	}
</script>

<style>
	.title{
		padding-left: 20upx;
		width: 100%;
		height: 60upx;
		font-size: 28upx;
		line-height: 60upx;
		
	}
	.submitBox{
		display: flex;
		width: 100%;
		height: 130upx;
		background: #FFFFFF;
		border-bottom: solid 1px rgba(245,245,245,.8);
	}
	.submitBox .pick{
		width: 450upx;
		font-size:30rpx;
		color:#AAAAAA
	}
	.submitBox .rightArrow{
		margin-top: 50upx;
		width: 13upx;
		height: 26upx;
	}
	.preName{
		padding-left: 20upx;
		width: 180upx;
		font-size: 30upx;
		line-height: 130upx;
	}
	.int{
		padding-left: 20upx;
		width: 570upx;
		height: 130upx;
		line-height: 130upx;
	}
	.buttonSync{
		display: flex;
		justify-content: space-between;
		width: 690upx;
		height: 130upx;
		padding: 0 30upx;
		margin: 20upx 0;
		background: #FFFFFF;
	}
	.buttonSync .text{
		font-size: 30upx;
		line-height: 130upx;
	}
	.buttonSync .switch{
		margin-top: 34upx;
	}
</style>
